<template>
	<view class="postitem" @click="navto('/pages/post/details')">
		<view class="postitem__user" @click.stop="navto('/pages/personal/homepage')">
			<image src="/static/cao/tx.png" class="postitem__tx" mode="aspectFill"></image>
			<view class="" style="flex: 1;">
				<view class="postitem__username">
					时光匆匆
				</view>
				<view class="postitem__time">
					2024-06-08 16:24
				</view>
			</view>
			<view class="postitem__btn" @click.stop="">
				关注
			</view>
		</view>
		<view class="postitem__cont">
			今天天气很好NICE?Mm,,每天都适合刷街啊
		</view>
		<view class="postitem__xc" v-if="item.pics.length>0">
			<!-- 一张图片 -->
			<image @click.stop="preview(item.pics,index)" v-if="item.pics.length==1" v-for="(item1,index) in item.pics" :src="item1" :key="index" class="postitem__pic1" mode="aspectFill"></image>
			<!-- 两/四张图片 -->
			<view class="u-flex u-flex-y-center u-flex-wrap u-flex-between">
				<image @click.stop="preview(item.pics,index)" v-if="item.pics.length==2||item.pics.length==4" :src="item1" v-for="(item1,index) in item.pics" :key="index" class="postitem__pic2" mode="aspectFill"></image>
			</view>
			<!-- 其他 -->
			<view class="u-flex u-flex-y-center u-flex-wrap">
				<image @click.stop="preview(item.pics,index)" v-if='item.pics.length!=2&&item.pics.length!=4&&item.pics.length!=1' :src="item1" v-for="(item1,index) in item.pics" :key="index" class="postitem__pic3" mode="aspectFill"></image>
			</view>
		</view>
		<view class="postitem__footer">
			<view class="postitem__cz">
				<image src="/static/cao/fx.png" style="width: 27rpx;height: 26rpx;" class="postitem__cz__icon" mode=""></image>
				<view class="postitem__cz__num">
					225
				</view>
			</view>
			<view class="u-flex u-flex-y-center">
				<view class="postitem__cz">
					<image src="/static/cao/dz.png" style="width: 30rpx;height: 27rpx;" class="postitem__cz__icon" mode=""></image>
					<view class="postitem__cz__num">
						98
					</view>
				</view>
				<view class="postitem__cz">
					<image src="/static/cao/sc.png" style="width: 29rpx;height: 28rpx;" class="postitem__cz__icon" mode=""></image>
					<view class="postitem__cz__num">
						235
					</view>
				</view>
				<view class="postitem__cz">
					<image src="/static/cao/pl.png" style="width: 28rpx;height: 27rpx;" class="postitem__cz__icon" mode=""></image>
					<view class="postitem__cz__num">
						112
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"postitem",
		props:{
			item:{
				default:{},
				type:Object
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
.postitem{
	// height: 625rpx;
	background: #FFFFFF;
	border-radius: 26rpx 26rpx 26rpx 26rpx;
	padding: 26rpx 0 28rpx 28rpx;
	margin-bottom: 20rpx;
	&__user{
		display: flex;
		align-items: center;
		
	}
	&__username{
		font-family: PingFang-SC, PingFang-SC;
		font-weight: 800;
		font-size: 24rpx;
		color: #010101;
		line-height: 24rpx;
	}
	&__time{
		font-family: PingFang-SC, PingFang-SC;
		font-weight: 800;
		font-size: 22rpx;
		color: #797979;
		line-height: 22rpx;
		margin-top: 20rpx;
	}
	&__btn{
		width: 104rpx;
		height: 52rpx;
		background: #fff;
		border-radius: 26rpx;
		border: 1rpx solid #E3432D;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #E3432D;
		line-height: 22rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 22rpx;
	}
	&__tx{
		width: 82rpx;
		height: 82rpx;
		border-radius: 50%;
		margin-right: 16rpx;
	}
	&__cont{
		font-family: PingFang-SC, PingFang-SC;
		font-weight: 800;
		font-size: 30rpx;
		color: #010101;
		line-height: 40rpx;
		margin: 20rpx 0 10rpx;
		padding-right: 28rpx;
	}
	&__xc{
		padding: 10rpx 8rpx 23rpx 0;
	}
	&__pic1{
		width: 644rpx;
		height: 362rpx;
		border-radius: 26rpx;
	}
	&__pic2{
		width: 310rpx;
		height: 270rpx;
		border-radius: 26rpx;
		margin-right: 15rpx;
		margin-bottom: 15rpx;
	}
	&__pic3{
		width: 205rpx;
		height: 184rpx;
		border-radius: 26rpx;
		margin-right: 15rpx;
		margin-bottom: 15rpx;
	}
	&__cz{
		font-family: DINNextLTPro, DINNextLTPro;
		font-weight: bold;
		font-size: 24rpx;
		color: #231815;
		line-height: 24rpx;
		display: flex;
		align-items: center;
		margin-right: 23rpx;
		&__icon{
			margin-right: 10rpx;
		}
		&__num{
			margin-top: 10rpx;
		}
	}
	&__footer{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
}
</style>